<template>
  <div class="example-index-button">
    <div class="button-text cn-regular-16">{{ buttonText }}</div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'ExampleIndexButton'
});

interface Props {
  buttonText: string;
}
withDefaults(defineProps<Props>(), {});
</script>

<style lang="scss" scoped>
.example-index-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 34px;
  padding: 4px 16px;
  cursor: pointer;
  background: rgb(0 130 255 / 30%);
  border: 1px solid;
  border-radius: 2px;
  border-image-source: linear-gradient(180deg, #75B6F4 -12.5%, rgb(117 182 244 / 0%) 142.86%);
  border-image-slice: 1;

  .button-text {
    color: #fff;
  }
}
</style>
